<template>
    <div id="app" >
        <el-button type="primary" size="middle" style="float:right" v-on:click="run" :disabled="curdisabled || time > 0">{{ text }}</el-button>
    </div>
</template>
<script>
export default {
  name: 'TimeBtn',
  props: {
    second: {
      type: Number,
      default: 60
    },
    isDisabled: {
      type: Boolean,
      default: false
    },
    xwDisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      time: 0,
      curdisabled: this.isDisabled
    }
  },
  mounted: function() {
    // this.curdisabled = this.isDisabled
  },
  watch: {
    isDisabled(val) {
      this.curdisabled = val
    }
  },
  computed: {
    text: function() {
      return this.time > 0 ? this.time + 's 后重获取' : '获取验证码'
    }
  },
  methods: {
    run: function() {
      this.$emit('run')
    },
    start: function() {
      this.time = this.second
      this.timer()
    },
    stop: function() {
      this.time = 0
      this.disabled = false
    },
    setDisabled: function(val) {
      this.disabled = val
    },
    timer: function() {
      if (this.time > 0) {
        this.time--
        setTimeout(this.timer, 1000)
      } else {
        this.disabled = false
      }
    }
  }
}
</script>